<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点属性</title>
</head>
<body>
<ul id="ulall">
    <li>床前明月光</li>
    <li id="li2">疑是地上霜</li>
    <li class="li3cls">举头望明月</li>
    <li>低头思故乡</li>
</ul>
</body>
<!--parentNode   返回结点的父亲节点,只找上一级,返回单个值-->
<!--parentNode       返回节点的父节点-->
<!--childNodes       返回子节点集合，childNodes[i]-->
<!--firstChild       返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点-->
<!--lastChild        返回节点的最后一个子节点-->
<!--nextSibling      下一个节点-->
<!--previousSibling  上一个节点-->

<!--firstElementChild        返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点-->
<!--lastElementChild         返回节点的最后一个子节点-->
<!--nextElementSibling       下一个节点-->
<!--previousElementSibling   上一个节点-->

<!--六字真言:找到他:层次查找,找儿子,找父亲,找相邻兄弟,Node,Element-->
         <!--操作他:操作html,操作标签,操作属性,操作css-->
<script>
    let li2 = window.document.getElementById("li2");
    console.log(li2.parentNode);
    let childli = window.document.getElementById("ulall");
    //node 指包含在HTML中的所有东西,文字,空格,标签等
    //element只表示标签
    // console.log(childli.childNodes);
    for(let node of childli.childNodes){
        if(node.nodeType == 1){
            console.log(node);
        }
    }

    console.log(childli.firstElementChild);
    console.log(li2.nextElementSibling);//li
    console.log(li2.previousElementSibling);//li

    //操作属性
    // getAttribute("属性名")
    // setAttribute("属性名","属性值")
    li2.setAttribute("name","li2name");//设置属性
    let li3 = li2.nextElementSibling;
    console.log(li3.getAttribute("class"));

    // 操作样式
    li2.style = "color:red ";
    //li2.style.color = "red";
    //显示block 隐藏none
    //li2.style = "display:block";

//    操作节点   新增,删除
    let li = window.document.createElement("li");
    li.innerText = "11111111111111111";
    console.log(li);
     //childli.appendChild(li);
     li2.insertBefore(li,null);
     li2.remove();

</script>
</html>